<template>
  <div class="hello">


    <el-progress :percentage="percentage" :color="customColor"></el-progress>

    <el-progress :percentage="percentage" :color="customColorMethod"></el-progress>

    <el-progress :percentage="percentage" :color="customColors"></el-progress>
    <div>
      <el-button-group>
        <el-button icon="el-icon-minus" @click="decrease"></el-button>
        <el-button icon="el-icon-plus" @click="increase"></el-button>
      </el-button-group>
    </div>

    <p>{{msg}}</p>
    <button @click="hello" >按钮</button>
  </div>





</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'sdsdsasdadad',
      percentage: 20,
      customColor: '#409eff',
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ]



    }
  },
  methods:{
    hello(){
      let that = this;
      that.msg = "";
      that.axios.get('http://127.0.0.1:3000/net/user')
        .then(
        function (response) {
          console.log(response.data)
          that.msg = response.data.ps[0];
        }
      )










    },



























    customColorMethod(percentage) {
      if (percentage < 30) {
        return '#909399';
      } else if (percentage < 70) {
        return '#e6a23c';
      } else {
        return '#67c23a';
      }
    },
    increase() {
      this.percentage += 10;
      if (this.percentage > 100) {
        this.percentage = 100;
      }
    },
    decrease() {
      this.percentage -= 10;
      if (this.percentage < 0) {
        this.percentage = 0;
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
